# Webpack config

One of Re.Pack key design goals was to give as much power and control to the developer — to you.
This means that Re.Pack doesn't hide anything under its own proprietary configuration, but uses regular Webpack configuration.

## Configuration path

By default, when running `react-native webpack-start` or `react-native webpack-bundle`, Re.Pack will look for Webpack configuration in the following places:

1. `<root>/webpack.config.{mjs,cjs,js}`
2. `<root>/.webpack/webpack.config.{mjs,cjs,js}`
3. `<root>/.webpack/webpackfile`

Where `<root>` is your project's root directory.

:::info

The paths above are the same ones that normal Webpack CLI looks for Webpack configuration.

:::


:::tip

Notice that you can use `.mjs`, `.cjs` and `.js` extension for Webpack config file. When looking for configuration file, Re.Pack will first try `.mjs`, then `.cjs` and finally `.js` extensions. We recommend to use `.mjs` or `.cjs` to be explicit.

:::

If you want to store Webpack config in different place, you can provide custom path:

- `react-native webpack-start --webpackConfig <path>`
- `react-native webpack-bundle --webpackConfig <path>`
- `webpack-cli -c <path>`

:::info

If the `<path>` starts with `./` or `../`, it will be treated as relative path - it will be resolved based on root directory detected by React Native CLI, which usually points to your project's root directory.

:::

## Webpack config template

Every project is different, has different structure, uses different dependencies, has different requirements, so we cannot know what Webpack configuration your project might needs. Instead we give use a sensible and well-documented [Webpack config template](./templates) to use as a base and adjust some bits based on your project.

Please, refer to [this document for templates](./templates).

We highly encourage to create recipes for adding or adjusting the support for other common use cases not included in the default template. **We welcome any PR!**

## Re.Pack's config APIs

To make Webpack-produced bundle compatible and runnable by React Native, Re.Pack gives you a set of Webpack plugins.

By default, all boring plugin configuration is abstracted behind a single [`RepackPlugin`](../../api/repack/classes/RepackPlugin), which should suffice to most projects.
However, in cause you need more control over the Re.Pack plugins, you can remove `RepackPlugin` and use plugins from [`plugins` namespace](../../api/repack/modules/plugins):

- [AssetsResolverPlugin](../../api/repack/classes/plugins.AssetsResolverPlugin) (__required__)
- [DevelopmentPlugin](../../api/repack/classes/plugins.DevelopmentPlugin) (__required__ only in development)
- [RepackTargetPlugin](../../api/repack/classes/plugins.RepackTargetPlugin) (__required__)
- [ReactRefreshPlugin](../../api/repack/classes/plugins.ReactRefreshPlugin)
- [OutputPlugin](../../api/repack/classes/plugins.OutputPlugin) (__required__)
- [ManifestPlugin](../../api/repack/classes/plugins.ManifestPlugin)
- [LoggerPlugin](../../api/repack/classes/plugins.LoggerPlugin)
- [JavaScriptLooseModePlugin](../../api/repack/classes/plugins.JavaScriptLooseModePlugin)

:::warning

Not including required plugins will break your build or cause your app to crash at runtime!

:::

Additionally, Re.Pack gives you few helper functions:

- [getAssetExtensionsRegExp](../../api/repack/functions/getAssetExtensionsRegExp)
- [getInitializationEntries](../../api/repack/functions/getInitializationEntries)
- [getPublicPath](../../api/repack/functions/getPublicPath)
- [getResolveOptions](../../api/repack/functions/getResolveOptions)
- [getDirname](../../api/repack/functions/getDirname)

:::caution

It entirely possible not to use the functions above, but **it's highly recommended to use them**.

:::
